<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
					;(function(designWidth, maxWidth) {
						var doc = document,
							win = window,
							docEl = doc.documentElement,
							remStyle = document.createElement("style"),
							tid;
		
						function refreshRem() {
							var width = docEl.getBoundingClientRect().width;
							maxWidth = maxWidth || 540;
							width>maxWidth && (width=maxWidth);
							var rem = width * 100 / designWidth;
							remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
						}
		
						if (docEl.firstElementChild) {
							docEl.firstElementChild.appendChild(remStyle);
						} else {
							var wrap = doc.createElement("div");
							wrap.appendChild(remStyle);
							doc.write(wrap.innerHTML);
							wrap = null;
						}
						//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
						refreshRem();
		
						win.addEventListener("resize", function() {
							clearTimeout(tid); //防止执行两次
							tid = setTimeout(refreshRem, 300);
						}, false);
		
						win.addEventListener("pageshow", function(e) {
							if (e.persisted) { // 浏览器后退的时候重新计算
								clearTimeout(tid);
								tid = setTimeout(refreshRem, 300);
							}
						}, false);
		
						if (doc.readyState === "complete") {
							doc.body.style.fontSize = "16px";
						} else {
							doc.addEventListener("DOMContentLoaded", function(e) {
								doc.body.style.fontSize = "16px";
							}, false);
						}
					})(640, document.documentElement.clientWidth);
				</script>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			::-webkit-scrollbar {
				-webkit-appearance: none;
				width: 4px;
			}
			::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background-color: rgba(0,0,0,.5);
				-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
			}
			::-webkit-scrollbar-thumb {
				border-radius:10px;
				background: #5d9d6d;
			}
			html,body{
				width: 100%;
				height: 100%;
				overflow: hidden;
				-webkit-user-select: none;
				box-sizing: border-box;
			}
			.bgCover,.bgCover i{
				width:100%;
				height: 100%;
				left:0;
				top:0;
				z-index: -1;
			}
			.bgCover i{
				position:absolute;
				-webkit-transform-origin:center center;
				background-size:100% 100%;
				background-position:center;
				background-repeat:no-repeat;
			}
			.smoke{
				position: absolute;
				width: 3rem;
				bottom: 2.9rem;
				right: 0;
				animation: fadeOutTop 3s cubic-bezier(.41,.78,.64,.5) infinite both;
			}
			@-webkit-keyframes fadeOutTop {
				0% {
					opacity: .2;
					-webkit-transform: translateY(0);
				}
				50% {
					opacity: .7;
					-webkit-transform: translateY(-.5rem);
				}
				85%{
					opacity: 1;
					-webkit-transform: translateY(-1.5rem);
				}
				100% {
					opacity: 0;
					-webkit-transform: translateY(-3rem);
				}
			}
			.talk1{
				opacity: 1;
				position: absolute;
				top: 0.3rem;
				right: 0;
				animation: bounceInRight 2s 1 both;
			}
			.talk2{
				opacity: 1;
				position: absolute;
				top: 1.4rem;
				left: 0;
				animation: bounceInLeft 2s 1s 1 both;
			}
			@keyframes bounceInLeft {
			  from,
			  60%,
			  75%,
			  90%,
			  to {
			    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			  }
			  0% {
			    opacity: 0;
			    -webkit-transform: translate3d(-3000px, 0, 0);
			    transform: translate3d(-3000px, 0, 0);
			  }
			  60% {
			    opacity: 1;
			    -webkit-transform: translate3d(25px, 0, 0);
			    transform: translate3d(25px, 0, 0);
			  }
			  75% {
			    -webkit-transform: translate3d(-10px, 0, 0);
			    transform: translate3d(-10px, 0, 0);
			  }
			  90% {
			    -webkit-transform: translate3d(5px, 0, 0);
			    transform: translate3d(5px, 0, 0);
			  }
			
			  to {
				  opacity: 1;
			    -webkit-transform: translate3d(0, 0, 0);
			    transform: translate3d(0, 0, 0);
			  }
			}
			@keyframes bounceInRight {
			  from,
			  60%,
			  75%,
			  90%,
			  to {
			    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			  }
			
			  from {
			    opacity: 0;
			    -webkit-transform: translate3d(3000px, 0, 0);
			    transform: translate3d(3000px, 0, 0);
			  }
			
			  60% {
			    opacity: 1;
			    -webkit-transform: translate3d(-25px, 0, 0);
			    transform: translate3d(-25px, 0, 0);
			  }
			
			  75% {
			    -webkit-transform: translate3d(10px, 0, 0);
			    transform: translate3d(10px, 0, 0);
			  }
			
			  90% {
			    -webkit-transform: translate3d(-5px, 0, 0);
			    transform: translate3d(-5px, 0, 0);
			  }
			
			  to {
				  opacity: 1;
			    -webkit-transform: translate3d(0, 0, 0);
			    transform: translate3d(0, 0, 0);
			  }
			}
		</style>
	</head>
	<body>
		<section class="main">
			<div class="abs bgCover">
				<i style='background-image: url("bgc.png");'></i>
			</div>
			<img src="smoke2.png" alt="" class="smoke">
			<img src="daughter.png" alt="" class="talk1">
			<img src="father.png" alt="" class="talk2">
		</section>
	</body>
</html>
